<template>
    <el-button style="margin: 10px 0 20px" type="primary"  @click="() => emit('showDialog', true, 'add')" :disabled="props.btnDisable">{{props.activeName === 'many' ? '添加参数' : '添加属性'}}</el-button>
    <el-table :data="props.tableData" class="table" border show-overflow-tooltip :row-key="(row: any)=> {return row.attr_id}">
      <el-table-column type="expand" width="50">
        <template #default="scope">
          <div class="zkh">
            <div v-if="scope.row.attr_vals.length !== 0" style="display: inline-block;"><el-tag class="elTag" v-for="(item, index) in scope.row.attr_vals.split(' ')" closable :key="index" @close="deleteTag(scope.row, index)">{{item}}</el-tag></div>
            <el-input ref="iptRef" v-if="scope.row.inputVisible" v-model="scope.row.inputValue" size='small' @keyup.enter="iptBlur(scope.row)"  @blur="iptBlur(scope.row)" style="width: 120px"/>
            <el-button v-else size="small" @click="zkhBtn(scope.row)" style="margin-left: 6px">+ new Tag</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="attr_name" label="参数名称"/>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button size="small" color="#409eff" :icon="Edit" style="color: #fff" @click="editAttr(scope.row)"></el-button>
          <el-button size="small" color="#F56C6C" :icon="Delete" style="color: #fff" @click="deleteAttr(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </template>


<script lang="ts" setup>
import { nextTick, ref } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import { RemoveParamsFnc, TagAddDelFnc } from '@/api/params'
import type { itemType } from './type'

const props = defineProps({
  tableData: {type: Array, required: true},  
  activeName: {type: String, required: true},  
  btnDisable: {type: Boolean, required: true}  
})
const iptRef: any = ref()

const emit = defineEmits(['showDialog', 'init', 'setID'])

// 编辑 参数 或者 属性
const editAttr = (row: {cat_id: number, attr_id: number}) => {
  emit('showDialog', true, 'edit')  
  emit('setID', row.cat_id + '', row.attr_id + '')
}

// 删除 参数 或 属性
const deleteAttr = async (row: {cat_id: number, attr_id: number}) => {
  ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示',{ confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'}).then(async () => {
    const res = await RemoveParamsFnc(row.cat_id, row.attr_id)
    if(res.data.meta.status === 200) {
      ElMessage({type: 'success', message: '删除成功', duration: 1000, onClose: () => {
        emit('init')
      }}) 
    }
  }).catch(() => {
    ElMessage({ type: 'info', message: '取消删除'})
  })
}

// 展开行
const zkhBtn = (row: {inputVisible: boolean, inputValue: string}) => {
  row.inputVisible = true
  row.inputValue = ''
  nextTick(() => {
    iptRef.value.focus()
  })
}

// 添加 删除 tag公共方法
const addDelFnc = async ( cat_id: number, attr_id: number, attr_name: string, attr_sel: string, attr_vals: string, msg: string) => {
  const res = await TagAddDelFnc(cat_id, attr_id, {
    attr_name: attr_name,
    attr_sel: attr_sel,
    attr_vals: attr_vals
  })
  if(res.data.meta.status == 2000) {
    ElMessage({type: 'success', message: msg})
  }
}

// 展开行添加tag
const iptBlur = async (row: itemType) => {
  row.inputVisible = false
  if(row.inputValue === '') {
    return
  } else {
    if(row.attr_vals === '') {
      row.attr_vals += row.inputValue.trim()
    } else {
      row.attr_vals += ' ' + row.inputValue.trim()
    }
    addDelFnc(row.cat_id, row.attr_id, row.attr_name, row.attr_sel, row.attr_vals, '添加成功')
  }
}

// 展开行删除tag
const deleteTag = async (row: itemType, index: number) => {
  let arr = row.attr_vals.split(' ')
  arr.splice(index, 1).join(' ')
  row.attr_vals = arr.join(' ')
  addDelFnc(row.cat_id, row.attr_id, row.attr_name, row.attr_sel, arr.join(' '), '删除成功')
}
</script>

<style lang="scss" scoped>
.elTag{
  margin:6px 0 6px 6px
}
</style>
